<template>
  <div class="common-tree">
    <el-tree
        :data="treeData"
        :props="treeProps"
        node-key="id"
        default-expand-all
        @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: 'CommonTree',
  props: {
    code: {
      type: String,
      required: true,
    },
    treeProps: {
      type: Object,
      default: () => ({
        label: 'label', // 默认展示的字段
        children: 'children', // 子节点字段
      }),
    },
  },
  data() {
    return {
      treeData: [], // 存储树形结构数据
    };
  },
  mounted() {
    this.loadTreeData(); // 页面加载时根据code加载树形结构数据
  },
  methods: {
    // 加载树形数据，根据传入的code动态加载不同的层级结构和数据
    loadTreeData() {
      // 模拟根据 code 加载不同的数据
      if (this.code === 'department') {
        this.treeData = [
          {
            id: 1,
            label: '公司总部',
            children: [
              { id: 2, label: '研发部' },
              { id: 3, label: '市场部' },
            ],
          },
        ];
      } else if (this.code === 'category') {
        this.treeData = [
          {
            id: 1,
            label: '电子产品',
            children: [
              { id: 2, label: '手机' },
              { id: 3, label: '电脑' },
            ],
          },
        ];
      }
      // 可以根据实际需求，通过API调用或其他方式加载不同的树形结构
    },

    // 处理节点点击事件，并传递事件到父组件
    handleNodeClick(node) {
      this.$emit('node-click', node); // 将点击的节点数据传递给父组件
    },
  },
};
</script>

<style scoped>
.common-tree {
  padding: 10px;
}
</style>
